<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>角色维护</title>
    <#include "../../commonFile/quote.ftl"/>
    <style>
        body{
            height:95%;
        }
    </style>
    <script>
        $(function(){
            $("#table").bootstrapTable({
                url:'/systembaserole/selectbaserole',  //获取表格数据
                contentType:'application/x-www-form-urlencoded; charset=UTF-8',//使用post传参，去掉后无法成功
                method: "post",
                toolbar:"#toolbar",
                cache: false,            //禁用ajax缓存
                striped: true,           //表格显示条纹
                pagination: true,        //在底部显示分页组件
                pageList: [10, 20],       //设置页面可以显示的数据条数
                pageSize: 10,             // 页面数据条数
                pageNumber: 1,            // 首页页码
                sidePagination: 'server', // 设置为服务器端分页
                showColumns:true,        //是否显示内容列下拉框
                showToggle:false,         //切换详细视图和列表视图
                queryParamsType: '',
                queryParams:function (params){   //请求服务器数据时，添加额外参数
                    return {
                        pageSize:params.pageSize, // 每页要显示的数据条数
                        pageNum:params.pageNumber,    // 页码
                        account:$("#account").val()
                    }
                },
                idField:'id',             //指定主键列
                columns:[{
                    checkbox: true,   //显示一个勾选框
                    align: 'center'   //居中显示
                },{
                    field:'name',  //返回json中的name
                    title:'角色名称',   //表格表头显示文字
                    align:'center',   //左右居中
                    valign: 'middle' // 上下居中
                },{
                    field:'orgid',
                    title:'组织机构ID',
                    align:'center',
                    valign: 'middle',
                },{
                    field:'orgtype',
                    title:'组织类别',
                    align:'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if(row.orgtype =="0"){
                           // 0：系统管理员创建 1：安工院 2：中石化 3：服务企业
                            value="系统管理员";
                        }else if(row.orgtype =="1"){
                            value="安工院";
                        }else if(row.orgtype =="2"){
                            value="中石化";
                        }else if(row.orgtype =="3"){
                            value="服务企业";
                        }
                        return value;
                    }
                },{
                    field:'isyes',
                    title:'是否有效',
                    align:'center',
                    valign: 'middle',
                    formatter: function (value ,row, index) {
                        var value="";
                        if(row.isyes=="1"){
                            value="是";
                        }else {
                            value="否";
                        }
                        return value;
                    }
                },{
                    field:'id',
                    title:'操作',
                    width:80,
                    align:'center',
                    valign: 'middle',
                    formatter:function(value, row, index){
                        var result = "";
                        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"banById('"+ row.id +"','"+ row.isyes +"')\" title='禁用启用'><span class='glyphicon glyphicon-ban-circle'></span></a>";
                        return result;
                    }
                }
                ]
            });
        });
        //表格查询
        function search(){
            $("#table").bootstrapTable("refresh");
        }
        /*
         角色禁用与启用
        */
        function banById(id,isyes) {
            debugger;
            $.ajax({
                type: "POST",
                url: "/systembaserole/banbyid",
                data: {id:id,isyes:isyes},
                success: function(data){
                    $("#table").bootstrapTable("refresh");
                },
                error:function () {
                    alert("操作失败！");
                }
            });
        }

        //新增
        function add(){
            $('form[id=myFormAdd] label.error').remove();
            //清空表单
            $(':input','#myFormAdd')
                    .not(':button, :submit, :reset')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            $('#myModalAdd').modal('show');
        }
        //保存新增
        function saveAdd(){
            if($('#myFormAdd').valid()){
                var obj = {
                    name:$("#nameAdd").val(),
                    isyes:$("#isyesAdd").val(),

                };
                $.ajax({
                    type:'post',
                    url:"/systembaserole/addbaserole",
                    data:JSON.stringify(obj),
                    contentType : 'application/json',
                    success:function(result){
                        if(result.success==true){
                            $("#table").bootstrapTable("refresh");
                            $('#myModalAdd').modal('hide');
                            alert(result.message);
                        }else{
                            alert(result.message);
                        }
                    },
                    error:function(){
                        alert("Ajax失败！");
                    }
                });
            }
        }
    </script>
</head>
<body class="container-fluid">
<div id="toolbar">
    <form id="form" class="form-inline" style="display: inline-block;">
        <div class="form-group">
            <input type="text" class="form-control input-sm" id="account" name="account" placeholder="请输入角色名称">
        </div>
        <button type="button" class="btn btn-default btn-sm btn-info" onclick="search()">查询</button>
    </form>
    <button type="button" class="btn btn-default btn-sm btn-success" onclick="add()">新增</button>
</div>
<table id="table"></table>
<#--新增模态框-->
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <form id="myFormAdd"  class="form-horizontal">
                            <div class="form-group">
                                <label for="name">角色名称</label>
                                <input type="text" class="form-control required username" id="nameAdd" name="name" placeholder="请输入角色名称">
                            </div>
                            <div class="form-group">
                                <label for="isyes">是否启用</label>
                                <select class="form-control required " id="isyesAdd" name="isyes">
                                    <option value="true">是</option>
                                    <option value="false">否</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveAdd()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>